<template>
  <!-- 余额明细 -->
  <div class="page-box ">
    <div class="tabs">
      <tabBar
        :list="tabs"
        :active-index="tabActive"
        @change="tabChange"
      ></tabBar>
    </div>
    <div class="user-box" v-show="tabActive === 0">
      <moneyRecords ref="moneyRecords"></moneyRecords>
    </div>
    <div class="user-box" v-show="tabActive === 1">
      <tixianmingxi ref="tixianmingxi"></tixianmingxi>
    </div>
    <div class="user-box" v-show="tabActive === 2">
    </div>
  </div>
</template>

<script>
import tabBar from "../components/tabBar.vue";
import tixianmingxi from "./components/tixianmingxi.vue"
import moneyRecords from "./components/moneyRecords.vue"
export default {
  name: "",
  components: { tabBar,tixianmingxi,moneyRecords},
  data() {
    return {
      tabActive: 0,
      tabs: [
        {
          name: "余额变动明细",
          value: 1,
        },
        {
          name: "提现明细",
          value: 2,
        }
      ],
    };
  },
  created() {
  },
  mounted(){

  },
  methods: {
    tabChange(e) {
      this.tabActive = e.index;
      if(e.index==0){
        this.$refs.moneyRecords.getList()
      }
      if(e.index==1){
        this.$refs.tixianmingxi.getList()
      }
    
    }
  },
};
</script>

<style scoped lang="scss">
.page-box {
  // padding-bottom: 30px;

  .tabs {
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .user-box{
    height: calc(100vh - 160px);
    overflow-y: auto;
  }
}
</style>
